<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			 * {
	            margin: 0;
	            padding: 0;
	            list-style: none;
	        }
	        .nav {
	            width: 900px;
	            height: 60px;
	            background-color: black;
	            margin: 0 auto;
	        }
            .nav li {
                width: 100px;
                height: 60px;
                /*border: 1px solid yellow;*/
                float: left;
                position: relative;
                overflow: hidden;
            }
            .nav a {
                position: absolute;
                width: 100%;
                height: 100%;
                font-size: 24px;
                color: blue;
                text-align: center;
                line-height: 60px;
                text-decoration: none;
                z-index: 2;
            }
            .nav span {
                position: absolute;
                width: 100%;
                height: 100%;
                background-color: yellow;
                top: 60px;
            }
		</style>
	</head>
	<body>
		<div class="nav">
	        <ul>
	            <li><a href="#">导航1</a><span></span></li>
	            <li><a href="#">导航2</a><span></span></li>
	            <li><a href="#">导航3</a><span></span></li>
	            <li><a href="#">导航4</a><span></span></li>
	            <li><a href="#">导航5</a><span></span></li>
	            <li><a href="#">导航6</a><span></span></li>
	            <li><a href="#">导航7</a><span></span></li>
	            <li><a href="#">导航8</a><span></span></li>
	            <li><a href="#">导航9</a><span></span></li>
	        </ul>
	        <!--音频标签-->
	        <div>
	            <audio src="mp3/A0.MP3"></audio>
	            <audio src="mp3/A1.MP3"></audio>
	            <audio src="mp3/A2.MP3"></audio>
	            <audio src="mp3/A3.MP3"></audio>
	            <audio src="mp3/A4.MP3"></audio>
	            <audio src="mp3/A5.MP3"></audio>
	            <audio src="mp3/A6.MP3"></audio>
	            <audio src="mp3/A7.MP3"></audio>
	            <audio src="mp3/B1.MP3"></audio>
	        </div>
    	</div>
		<script src="jquery-3.3.1.js"></script>
		<script>
			$(function(){
				$(".nav li").mouseenter(function(){
					$(this).children("span").stop().animate({top:0});
					var index=$(this).index();
					 //音乐播放的方法时DOM对象的，jq未对音乐视频进行封装
					$("audio").get(index).load();
					$("audio").get(index).play();
				}).mouseleave(function(){
					$(this).children("span").stop().animate({top:60});
				});
			});
		</script>
	</body>
</html>